<template>
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="550px"
        @confirm="handleSubmit"
        @close="handleClose"
    >
        <el-form ref="formRef" :model="formData" label-width="110px">
            
            <el-form-item label="配置名称 :" prop="value"
                          :rules="[{required: true, message:'配置名称不可为空',trigger:'change'}]">
                <el-input class="w-10/12" v-model="formData.value" placeholder="请输入配置名称" clearable/>
            </el-form-item>
            
            <el-form-item label="映射值 :" prop="name"
                          :rules="[{required: true, message:'映射值不可为空',trigger:'change'}]">
                
                <el-input class="w-10/12" v-model="formData.name" placeholder="请输入映射值"
                          @change="getToUpperCase "
                          clearable/>
            </el-form-item>
            
            <el-form-item label="是否停用 :" prop="isDelete"
                          :rules="[{required: true, message:'是否停用不可为空',trigger:'change'}]">
                <div class="ml-16">
                    <el-radio-group v-model="formData.isDelete">
                        <el-radio :label="0">正常</el-radio>
                        <el-radio :label="1">停用</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
        
        
        </el-form>
    </popup>
</template>

<script lang="ts" setup>
import Popup from '@/components/popup/index.vue'
import {FormInstance} from "element-plus";
import feedback from "@/utils/feedback";
import {UnwrapNestedRefs} from "@vue/reactivity";
import AfterSaleConfigItemRequest from "@/api/system/reuquest/AfterSaleConfigItemRequest";
import {getAfterSaleOrderConfigDetail, optAfterSaleConfig} from "@/api/system/SystemConfigService";




const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formRef = shallowRef<FormInstance>()


/**
 * 定义枚举数据
 *
 * @author 徐寿春
 * 2023/4/11 09:23
 */
const formData: UnwrapNestedRefs<AfterSaleConfigItemRequest> = reactive(new AfterSaleConfigItemRequest())

/**
 * 提交
 */
const emit = defineEmits(["success", "close"])


/**
 *  定义提交
 *
 * @author 徐寿春
 * 2023/4/11 09:18
 */
async function handleSubmit() {
    await formRef.value?.validate()
    
    await optAfterSaleConfig(formData).then((respond => {
        popupRef.value?.close()
        feedback.msgSuccess('操作成功')
        emit('success')
    }))
    
    
}


/**
 * 定义关闭
 *
 * @author 徐寿春
 * 2023/4/11 09:23
 */
function handleClose() {
    formRef.value?.resetFields()
    emit('close')
    
}

/**
 * 获取当前枚举详情
 *
 * @param row
 */
async function getMenuDetail(row: Record<string, any>) {
    await getAfterSaleOrderConfigDetail({id: row.id}).then(response => {
        setFormData(response)
    })
}


/**
 * 回写表单
 *
 * @param formData
 * @param data
 */
const setFormData = (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}


/**
 * 打开弹窗
 *
 * @param type
 * @param cooperateType
 */
function open(type = 'add', cooperateType: string) {
    formData.type = cooperateType
    mode.value = type
    popupRef.value?.open()
}


/**
 * 变大写
 * @param row
 */
function getToUpperCase() {
    if (!!formData.name) {
        formData.name = formData.name.toUpperCase().trim()
    }
}


/**
 * 定义标题
 */
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'add' ? '新增菜单' : '编辑菜单'
})


defineExpose({
    open,
    setFormData,
    getMenuDetail
})


</script>
